<template>
  <section class="component message-send-list">
    <!-- 数据列表处理 -->
    <message-contact-list @on-change="onChange" ref="message-contact-list"></message-contact-list>

    <!-- 短信模板选择 -->
    <div style="margin-top:20px">
      <el-form :model="model" ref="form">
        <el-form-item label="逾期阶段" prop="overduePeriod" :rules="{required: true, message: '请选择逾期阶段', trigger: 'blur'}">
          <el-select v-model="model.overduePeriod" placeholder="请选择" clearable @change="onOverduePeriodChange">
            <el-option v-for="{index,name,code} in $dict.getDictData('OverduePeriodStatus')" :key="index" :label="name" :value="code.replace(/\+/, '')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模板名称" prop="templateId" :rules="{required: true, message: '请选择模板', trigger: 'blur'}">
          <el-select v-model="model.templateId" placeholder="请选择" clearable @change="onTemplateChange">
            <el-option v-for="item in templateSet" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="短信内容" prop="messageContent">
          <el-input type="textarea" :maxlength="500" v-model="model.messageContent"></el-input>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="operate-buttons">
      <el-button @click="back()">上一步</el-button>
      <el-button @click="close()">取消</el-button>
      <el-button @click="submit()">发送</el-button>
    </div>
  </section>
</template>


<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Model} from 'vue-property-decorator';
import { State, namespace } from "vuex-class";
import DataBox from "~/components/common/data-box.vue";
import MessageContactList from '~/components/smart-collection/message-collection/message-contact-list.vue';
import { SmartCollectionService } from "~/services/domain-service/smart-collection.service";
import { TemplateService } from '~/services/domain-service/template.service';
const MessageCollectionModule = namespace('message-collection')

@Component({
  components: {
    DataBox,
    MessageContactList
  }
})
export default class MessageSendList extends Vue {
  @Dependencies(SmartCollectionService)
  private smartCollectionService: SmartCollectionService
  @Dependencies(TemplateService)
  private templateService: TemplateService
  @MessageCollectionModule.State
  private caseIdList: any[]

  @Prop()
  private sendTarget

  private dataSet: any[] = []

  private templateSet: any[] = []

  private model: any = {
    overduePeriod: '',
    templateId: '',
    messageContent: '',
  }

  public refreshData() {
    const form: any = this.$refs['form']
    form.resetFields()
    const instance: any = this.$refs['message-contact-list']
    instance.refreshData()
  }

  @Emit('on-back')
  private back() {
    const form: any = this.$refs['form']
    form.resetFields()
  }
  @Emit('on-close')
  private close() {}

  /**
   * 数据列表改变
   */
  private onChange(val) {
    this.dataSet = val || []
  }

  /**
   * 逾期阶段改变
   */
  private onOverduePeriodChange(overduePeriod: string) {
    if (overduePeriod) {
      this.templateService.getTemplateByOverduePeriod({overduePeriod,templateCategory: "MESSAGE"}).subscribe(
        data => this.templateSet = data || []
      )
    } else {
      this.model.overduePeriod = ''
    }
    this.onTemplateChange('')
  }

  /**
   * 模板改变
   */
  private onTemplateChange(templateId: string) {
    let templateContent: string = ''
    if (templateId) {
      const template: any = this.templateSet.find(v => v.id === templateId)
      templateContent = template.templateContent
    }
    this.model.templateId = templateId
    this.model.messageContent = templateContent
  }

  /**
   * 发送
   */
  private submit() {
    if (this.dataSet.length === 0) {
      this.$message.warning('数据为空,不能发送')
      return
    }
    const form: any = this.$refs['form']
    form.validate(v => {
      if (!v) return
      const sendMessage: any[] = this.caseIdList.map(v => {
        const arr: any[] = this.dataSet.filter(e => e.caseId === v) || []
        return {
          caseId: v,
          contIds: arr.map(d => d.id) || []
        }
      })
      const request: any = {
        templateId: this.model.templateId,
         sendMessageRequests: sendMessage,
         templateContent:this.model.messageContent
      }
      this.smartCollectionService.batchSendMessage(request).subscribe(
        data => {
          this.close()
          this.$message.success('发送成功')
        }
      )
    })
  }

}
</script>

